<template>
  <div class="orderlist-page" id="orderlist-page">
    <div class="orderlist-contain">
      <div class="orderlist-top">
        <van-nav-bar title="我的订单" right-text="" left-arrow @click-left="onClickLeft" />
      </div>
      <div class="orderlist-content" ref="orderlist_page">
        <div class="order-list">
          <div class="order-item" v-for="(item,index) in orderList" :key="index" @click="getOrderDetail(item)">
            <div class="top">
              <div>
                <img :src="deliveryThumb" alt="">
              </div>
              <div class="order-time">
                {{item.create_time}}
              </div>
            </div>
            <div class="info">
              <order-product :orderdata='item'></order-product>
            </div>
            <div class="stats">
              <div class="status-line">
                <!-- 提交 -->
                <div class="state-item" :class="[Number(item.stats) >= 0?'before-status':'after-status']">
                  <span class="sate-icon">
                    <img class="sate-img" src="//static-as.missfresh.cn/frontend/img/order-state-a-02.png">
                  </span>
                  <span class="sate-write">待付款</span>
                  <i class="state-line"></i>
                </div>
                <!-- 支付 -->
                <div class="state-item" :class="[Number(item.stats) >= 1?'before-status':'after-status']">
                  <span class="sate-icon">
                    <img class="sate-img" src="//static-as.missfresh.cn/frontend/img/order-state-b-03.png">
                  </span>
                  <span class="sate-write">进行中</span>
                  <i class="state-line"></i>
                </div>
                <!-- 配送中 -->
                <div class="state-item" :class="[Number(item.stats) >= 2?'before-status':'after-status']">
                  <span class="sate-icon">
                    <img class="sate-img" src="//static-as.missfresh.cn/frontend/img/order-state-c-03.png">
                  </span>
                  <span class="sate-write">配送中</span>
                  <i class="state-line"></i>
                </div>
                <!-- 签收 -->
                <div class="state-item" :class="[Number(item.stats) === 3?'before-status':'after-status']">
                  <span class="sate-icon">
                    <img class="sate-img" src="//static-as.missfresh.cn/frontend/img/order-state-d-02.png">
                  </span>
                  <span class="sate-write">已签收</span>
                </div>
              </div>
              <div class="status-bottom">

                <div class="orderList-status-price">
                  <div>实付:
                    <span>￥
                      <i>{{item.total_fee}}</i>
                    </span>
                  </div>
                </div>
                <button class="orderList-status-btn" @click.stop.prevent="btnOptionClick(item)">再來一单</button>
              </div>
            </div>
          </div>
          <div class="transparent-bg"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import orderProduct from '#/orderProduct/orderProduct'
import Vue from 'vue'
import { NavBar, Icon } from 'vant'
import {CODE, APIURI} from '#/common/js/apiConst'
Vue.use(NavBar).use(Icon)

export default {
  data() {
    return {
      orderList: {},
      deliveryThumb: 'https://j-image.missfresh.cn/img_20170228112636095.png'
    }
  },
  components: {
    orderProduct
  },
  created() {
    this.$axios
      .get(APIURI + '/order/list/1')
      .then(res => {
        res = res.data
        if (res.code === CODE) {
          this.orderList = res.data.list
          // DOM更新后
          this.$nextTick(() => {
            this._initScroll()
          })
        }
      })
      .catch(function(err) {
        console.log(err)
      })
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/user'
      })
    },
    _initScroll() {
      if (!this.ordersScroll) {
        this.ordersScroll = new BScroll(this.$refs.orderlist_page, {
          probeType: 3,
          scrollY: true,
          scrollX: true,
          click: true
        })
      } else {
        this.ordersScroll.refresh()
      }
    },
    getOrderDetail(item) {
      this.$router.push({
        path: '/user/orderdetail?id=' + item.id
      })
    },
    btnOptionClick(item) {
      this.$router.push({
        path: '/shopcar?id=' + item.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../common/scss/common.scss';
@mixin gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.orderlist-page {
  background-color: #f9f9f9;
  width: 100%;
  .orderlist-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }
  .orderlist-content {
    margin-top: 5px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 46px;
    .order-list {
      .order-item {
        padding: 0 15px;
        margin-top: 10px;
        background-color: $white;
        .top {
          @include spaceBetweenCenter();
          height: 44px;
          border-bottom: 1px solid #e6e6e6;
          img {
            height: 14px;
          }
          .order-time {
            font-size: 12px;
            color: #969696;
          }
        }
        .info {
          padding: 16px 0;
          border-bottom: 1px solid #f5f5f5;
        }
        .stats {
          width: 100%;
          .status-line {
            padding: 14px 0;
            margin: 0;
            @include leftFlexCenter();
            .state-item {
              margin-right: 23px;
              position: relative;
              text-align: center;
              .sate-icon {
                width: 22px;
                height: 22px;
                text-align: center;
                font-size: 0;
                line-height: 0;
                position: relative;
                z-index: 10;
                img {
                  width: 22px !important;
                  height: 22px !important;
                  padding: 0 !important;
                }
              }
              .sate-write {
                font-size: 12px;
                margin-top: 5px;
                color: #474346;
                display: block;
                text-align: center;
              }
              .state-line {
                position: absolute;
                width: 42px;
                height: 1px;
                top: 10px;
                left: 29px;
                background-color: #ff9cce;
              }
              &.before-status {
                .state-line {
                  position: absolute;
                  width: 42px;
                  height: 1px;
                  top: 10px;
                  left: 29px;
                  background-color: #ff9cce;
                }
                .sate-write {
                  font-size: 12px;
                  margin-top: 5px;
                  color: #474346;
                  display: block;
                  text-align: center;
                }
                img {
                  width: 22px !important;
                  height: 22px !important;
                  padding: 0 !important;
                }
              }
              &.after-status {
                .state-line {
                  position: absolute;
                  width: 42px;
                  height: 1px;
                  top: 10px;
                  left: 29px;
                  background-color: #e2e2e2;
                }
                .sate-write {
                  font-size: 12px;
                  margin-top: 5px;
                  color: #e2e2e2;
                  display: block;
                  text-align: center;
                  @include gray();
                }
                img {
                  width: 22px !important;
                  height: 22px !important;
                  padding: 0 !important;
                  @include gray();
                }
              }
            }
          }
          .status-bottom {
            width: 100%;
            border-top: 1px solid #f5f5f5;
            padding: 10px 0;
            @include spaceBetweenCenter();
            font-size: 0;
            div {
              font-size: 14px;
            }
            .orderList-status-price span {
              font-weight: 700;
              font-size: 14px;
              i {
                font-size: 14px;
                font-style: normal;
                margin-left: -2px;
              }
            }
            .orderList-status-btn {
              box-sizing: border-box;
              width: 72px;
              height: 30px;
              line-height: 30px;
              background-color: #fff;
              color: #ff4891;
              border: 1px solid #ff4891;
              font-size: 14px;
              border-radius: 3px;
              padding: 0;
            }
          }
        }
      }
    }
    .transparent-bg {
      width: 100%;
      height: 66px;
      background-color: transparent;
    }
  }
}
</style>